<template>
  <view v-if="data">
    <!-- 图片 -->
    <view v-if="data.urls.length > 0" class="swiper-imgs mb-3 c-br c-pd bg-white overflow-x-auto">
      <scroll-view :show-scrollbar="true" style="width: 1000rpx" class="whitespace-normal" :scroll-x="true">
        <image class="w-20 h-20 mr-4" v-for="(item, index) in data.urls" :key="index" mode="aspectFill" :src="item" @click="previewImg(index, 'img')" />
      </scroll-view>
    </view>
    <!-- 表单信息 -->
    <view class="mb-3">
      <van-cell-group inset>
        <van-cell use-label-slot title="表单信息">
          <view slot="label">
            <view v-for="(item, index) in formListDetail" :key="index">
              <view class="mb-1">
                <van-cell use-label-slot>
                  <view slot="title" class="font-bold">
                    {{ item.name }}
                  </view>
                </van-cell>
              </view>
              <view v-if="item.introduce" class="mb-1">
                <van-cell use-label-slot>
                  <view slot="title" class="font-bold c-blue">
                    {{ item.introduce }}
                  </view>
                </van-cell>
              </view>
              <view class="form-content">
                <view v-for="(cItem, cIndex) in item.list" :key="cIndex">
                  <view v-if="cItem.fieldType !== 4 || cItem.fieldType !== 5 || cItem.fieldType !== 8">
                    <van-cell :title="cItem.attrName" :value="cItem.value"></van-cell>
                  </view>
                  <view v-if="cItem.fieldType === 4">
                    <van-cell :title="cItem.attrName" use-label-slot>
                      <view slot="label">
                        <view class="mb-2" v-for="(imgItem, imgIndex) in cItem.value" :key="imgIndex">
                          <image class="w-30 h-30" mode="aspectFill" :src="imgItem" @click="previewImg(imgIndex, 'form', cItem.value)"> </image>
                        </view>
                      </view>
                    </van-cell>
                  </view>
                  <view v-if="cItem.fieldType === 5">
                    <van-cell :title="cItem.attrName" use-label-slot>
                      <view slot="label">
                        <video v-if="cItem.value" controls :show-play-btn="true" id="video" :src="cItem.value"></video>
                      </view>
                    </van-cell>
                  </view>
                  <view v-if="cItem.fieldType === 8">
                    <van-cell :title="cItem.attrName" use-label-slot>
                      <view slot="right-icon">
                        <van-button
                          @click="
                            () => {
                              if (isPlaying && audioKey === 'formAudio') {
                                stopAudio();
                                return false;
                              }
                              playAudio(cItem!.value);
                              audioKey = 'formAudio';
                            }
                          "
                          icon="volume-o"
                          type="primary"
                          size="mini"
                          >{{ isPlaying && audioKey === 'formAudio' ? '播放中/暂停' : '播放' }}</van-button
                        >
                      </view>
                    </van-cell>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </van-cell>
      </van-cell-group>
    </view>
    <van-cell-group inset>
      <van-cell v-if="data.orderTag" title="订单标识" use-label-slot>
        <view slot="right-icon" class="c-red">
          {{ data.orderTag === '1' ? '新用户下单' : '新用户下单加急' }}
        </view>
      </van-cell>
      <van-cell v-if="data.orderRemark" title="备注" :value="data.orderRemark" use-label-slot> </van-cell>
      <van-cell v-if="data.voiceRemark" use-label-slot title="用户语音备注">
        <view slot="right-icon">
          <van-button
            @click="
              () => {
                if (isPlaying && audioKey === 'voiceRemark') {
                  stopAudio();
                  return false;
                }
                playAudio(data!.voiceRemark);
                audioKey = 'voiceRemark';
              }
            "
            icon="volume-o"
            type="primary"
            size="mini"
            >{{ isPlaying && audioKey === 'voiceRemark' ? '播放中/暂停' : '播放' }}</van-button
          >
        </view>
      </van-cell>
      <van-cell v-if="data.businessVoice" use-label-slot title="商户语音备注">
        <view slot="right-icon">
          <van-button
            @click="
              () => {
                if (isPlaying && audioKey === 'businessVoice') {
                  stopAudio();
                  return false;
                }
                playAudio(data!.businessVoice);
                audioKey = 'businessVoice';
              }
            "
            icon="volume-o"
            type="primary"
            size="mini"
            >{{ isPlaying && audioKey === 'businessVoice' ? '播放中/暂停' : '播放' }}</van-button
          >
        </view>
      </van-cell>
      <van-cell use-label-slot v-if="data!.appointmentState" title="预约状态">
        <view slot="right-icon">
          <van-tag class="mr-2" :type="badgeAppointmentStateShow(data.appointmentState)">{{ EOrderAppointState[data.appointmentState] }}</van-tag>
        </view>
      </van-cell>
      <van-cell title="呼叫器" :value="data!.beeperName" />
      <van-cell title="联系人" :value="data!.linkName" />
      <van-cell title="联系电话" :value="data!.phone" />
      <van-cell title="详细地址" :value="data!.fullAddress" />
      <van-cell title="服务员" v-if="data!.waiterName" :value="data!.waiterName" />
      <van-cell title="订单编号" use-label-slot>
        <view slot="right-icon">
          <text class="c-text-color-grey font-size-3 mr-1">{{ data!.orderNo }}</text>
          <van-button type="primary" size="mini" @click="copyContent">复制</van-button>
        </view>
      </van-cell>
      <van-cell title="订单类型" :value="EOrderType[data!.orderType]" />
      <van-cell v-if="data!.orderType === 8" title="报警类型" :value="EOrderAlarmType[data!.alarmType as keyof typeof EOrderAlarmType]" />
      <van-cell v-if="data!.orderType === 8" title="报警地址" :value="data!.currentAddress" />
      <van-cell v-if="data!.orderType === 3" title="计时类型" :value="data!.timingType === 1 ? '固定时长' : '按需灵活时长'" />
      <van-cell title="下单时间" :value="data!.createDate" />
      <van-cell title="支付方式" :value="EOrderPayWay[data!.payType]" />
      <van-cell title="异常状态" v-if="data!.errorState">
        <view class="c-red">{{ EOrderErrorState[data!.errorState] }}</view>
      </van-cell>
      <van-cell title="完成日期" v-if="data!.orderState === 20 && data!.completeDate" :value="data!.completeDate" />
      <van-cell title="取消日期" v-if="data!.orderState === 15 && data!.cancelDate" :value="data!.cancelDate" />
      <van-cell title="取消原因" v-if="data!.orderState === 15 && data!.cancelReason" :value="data!.cancelReason" />
    </van-cell-group>
  </view>
</template>

<script setup lang="ts">
import useToast from '@/hooks/useToast';
import { EOrderType, EOrderAlarmType, EOrderPayWay, EOrderErrorState, EOrderAppointState } from '@/enum/index';
import usePlayAudio from '@/hooks/usePlayAudio'; // 修改为实际路径

const props = defineProps<{ data: IOrderDetailInfo | undefined; formList?: any; formListDetail?: any; showQueryResult?: any }>();

const data = ref<IOrderDetailInfo | undefined>(undefined);
const formList = ref<any>([]);
const formListDetail = ref<any>([]);
const showQueryResult = ref<any>([]);

const { showToast } = useToast();

const { isPlaying, playAudio, stopAudio } = usePlayAudio();

const audioKey = ref<string>('');

watch(
  () => props.data,
  (newData) => {
    data.value = newData;
  },
);

watch(
  () => props.formList,
  (newData) => {
    formList.value = newData;
  },
);

watch(
  () => props.formListDetail,
  (newData) => {
    formListDetail.value = newData;
    console.log(formListDetail, 'formListDetail');
  },
);

watch(
  () => props.showQueryResult,
  (newData) => {
    showQueryResult.value = newData;
  },
);

const copyContent = () => {
  uni.setClipboardData({
    //准备复制的数据内容
    data: data.value!.orderNo,
    success: (res) => {
      showToast('复制成功', 'success');
    },
  });
};

const previewImg = (index: number, type: string, tUrls?: string[]) => {
  //type form表单 img图片
  uni.previewImage({
    urls: type === 'form' ? tUrls! : data.value!.urls,
    current: index,
  });
};

//父元素调用销毁音频播放功能
const destoryAudio = () => {
  stopAudio();
};

//过滤状态
const badgeAppointmentStateShow = (type: number) => {
  switch (type) {
    case 1:
      return 'default';
      break;
    case 3:
      return 'danger';
      break;
    case 5:
      return 'success';
      break;
    case 7:
      return 'default';
      break;
  }
};

defineExpose({
  destoryAudio,
});
</script>
